<template>
  <div>
    <div class="w100 rowsc rowsm fs-24 fw-b col333 mb-20">
      大学生创新创业训练计划项目
    </div>
    <div class="w100 bgff br-16 h-68 rowsb rowsm pl-20 pr-20 trt mb-20">
      <div class="fs-20 col333 fw-b">项目名称：</div>
      <el-input
        v-model="name"
        placeholder="请输入项目名称"
        class="w-400 input"
      ></el-input>
    </div>

    <div class="w100 bgff br-16 h-68 rowsb rowsm pl-20 pr-20 trt mb-20">
      <div class="fs-20 col333 fw-b">项目负责人：</div>
      <div class="rows rowsm fs-20 col666">
        <div class="mr-10" v-if="user">{{ user.name }} {{ user.stNumber }}</div>
        <img
          src="../../../static/img/icon_sc-1.png"
          class="w-24 h-24 mr-10"
          alt=""
          v-if="user"
          @click="clearUser()"
        />
        <img
          src="../../../static/img/icon_j-1.png"
          class="w-24 h-24"
          alt=""
          @click="choseStudent()"
        />
      </div>
    </div>

    <div class="w100 bgff br-16 h-68 rowsb rowsm pl-20 pr-20 trt mb-20">
      <div class="fs-20 col333 fw-b">级别：</div>
      <el-select v-model="choseLevel" placeholder="选择比赛级别">
        <el-option
          v-for="item in levelList"
          :key="item"
          :label="item"
          :value="item"
        >
        </el-option>
      </el-select>
    </div>

    <!-- <div class="w100 bgff br-16 h-68 rowsb rowsm pl-20 pr-20 trt mb-20">
        <div class="fs-20 col333 fw-b">主办单位：</div>
        <el-input v-model="unit" placeholder="请输入主办单位" class="w-400 input"></el-input>
      </div> -->

    <div class="w100 bgff br-16 h-68 rowsb rowsm pl-20 pr-20 trt mb-20">
      <div class="fs-20 col333 fw-b">结题时间：</div>
      <el-date-picker
        v-model="time"
        align="right"
        type="date"
        placeholder="请输入结题时间"
      >
      </el-date-picker>
    </div>

    <div class="w100 bgff br-16 p-all-20 mb-20">
      <div class="fs-20 col333 fw-b mb-10">简要说明：</div>
      <el-input
        type="textarea"
        :rows="4"
        placeholder="请输入您的劳动说明"
        class="input"
        v-model="info"
      >
      </el-input>
    </div>

    <div class="w100 bgff br-16 pl-20 pr-20 trt mb-40" style="padding: 20px">
      <div class="fs-20 col333 fw-b" style="text-align: left">附件上传：</div>
      <el-upload
        class="upload-demo"
        :action="`${this.$apiUploadUrl}/api/utils/ossUpload`"
        :show-file-list="true"
        :multiple="false"
        :limit="6"
        :on-success="uploadSuccess"
        :on-error="uploadErr"
        :on-remove="delFile"
        :before-upload="beforeUpload"
        :disabled="isUploadSuccess"
        accept=".doc, .docx, .pdf, .xls, .xlsx, .jpg, .jpeg, .png, .mp4, .mov, .avi"
      >
        <div class="rows rowsm">
          <img src="../../../static/img/icon_sc.png" class="w-30 h-30" alt="" />
          <div class="fs-20 col888">（可上传word、pdf、excel、图片、视频）</div>
        </div>
        <p class="mark">视频上传最大不超过100M</p>
      </el-upload>
    </div>

    <div class="w100 rowsc rowsm">
      <el-button  type="primary" 
        class="w-400 h-60 br-30 fs-24" 
        style="background-color: #E33636;border:none;font-size:22px;border-radius: 30px;" 
        :disabled="isUploadSuccess"
        @click="submit"
      >提交</el-button>
    </div>
  </div>
</template>
  
  <script>
export default {
  components: {},
  props: {
    type: {
      type: String,
    },
    user: {
      default: null,
    },
    inputData: {
      default: null,
    },
  },
  data() {
    return {
      name: "",
      info: "",
      unit: "",
      time: "",
      levelList: [],
      choseLevel: "",
      file: "",
      fileName: "",
      fileType: "",
      proFileList: [],
       isUploadSuccess:false
    };
  },
  watch: {},
  computed: {},
  methods: {
    delFile(file) {
      this.proFileList = this.proFileList.filter(
        (item) => item.file != file.response.url
      );
    },
    beforeUpload(file) {
      this.isUploadSuccess = true
      const isLt100M = file.size / 1024 / 1024 < 100;
      if (!isLt100M) {
        this.$message.warning("上传的文件大小不能超过 100MB!");
      }
      return isLt100M;
    },
    submit() {
      if (!this.name)
        return this.$notify({ title: "提示", message: "请输入项目名" });
      if (!this.user)
        return this.$notify({ title: "提示", message: "请选择负责人" });
      if (!this.choseLevel)
        return this.$notify({ title: "提示", message: "请选择级别" });
      // if(!this.unit) return this.$notify({title: '提示',message: '请输入单位'});
      if (!this.time)
        return this.$notify({ title: "提示", message: "请选择时间" });
      if (!this.info)
        return this.$notify({ title: "提示", message: "请输入内容" });
      if (this.proFileList.length == 0)
        return this.$notify({ title: "提示", message: "请上传文件" });

      let data = {
        type: this.type,
        name: this.name,
        bgTime: this.time,
        jbName: this.choseLevel,
        content: this.info,
        file: this.file,
        fileType: this.fileType,
        fileName: this.fileName,
        proLdUserList: [
          {
            userId: this.user.userId,
          },
        ],
        proFileList: this.proFileList,
      };

      this.$axios.post("prold/add", { ...data }).then((res) => {
        this.$notify({
          title: "提示",
          message: res.data.msg,
        });
        if (res.data.code != 200) return;
        setTimeout(() => {
          this.$emit("back");
        }, 1000);
      });
    },
    clearUser() {
      this.$emit("clearUser");
    },
    choseStudent() {
      let data = {
        type: this.type,
        name: this.name,
        bgTime: this.time,
        jbName: this.choseLevel,
        content: this.info,
        file: this.file,
        fileType: this.fileType,
        fileName: this.fileName,
      };
      this.$emit("choseStudent", data);
    },
    uploadSuccess(response, file,fileList) {
      console.log('response, file',response, file)
      if (response.code == 200) {
        this.proFileList.push({
          file: response.url,
          fileName: response.originalFilename,
          fileType:
            file.raw.type.split("/")[0] == "image" ||
            file.raw.type.split("/")[0] == "video"
              ? file.raw.type.split("/")[0]
              : "file",
        });
        this.$message.success("上传成功");
         this.isUploadSuccess = false
      } else {
        // 上传失败，删除文件名
      fileList.splice(fileList.indexOf(file),1);
      this.$notify({title: '提示',message: response.msg || '上传失败'});
      this.isUploadSuccess = false
      }
    },
    uploadErr(err, file, fileList) {
      console.log("err");
      console.log(err, file, fileList);
    },
    getList() {
      this.$axios.post("proldconfig/listJb", {}).then((res) => {
        if (res.data.code != 200)
          return this.$notify({
            title: "提示",
            message: res.data.msg,
          });
        let { rows } = res.data;
        this.levelList = rows.map((item) => item.name);
      });
    },
  },
  created() {
    this.getList();
    if (this.inputData) {
      console.log('this.inputData',this.inputData)
      let data = this.inputData;
      this.name = data.name;
      this.time = data.bgTime;
      this.choseLevel = data.jbName;
      this.info = data.content;
      this.file = data.file;
      this.fileType = data.fileType;
      this.fileName = data.fileName;
      // this.proFileList = data.proFileList;
    }
  },
  mounted() {},
};
</script>
  <style lang="scss" scoped>
.input /deep/ .el-input__inner {
  border: none;
  background-color: rgba(0, 0, 0, 0);
  font-size: 20px;
  text-align: right;
}
</style>